<template>
  <div class="bg-white">
    <el-page-header @back="back">
      <template slot="title">
        <span class="back">返回</span>
      </template>
      <template slot="content">
        <span class="back pr-4">{{ current.name }}</span>
        <el-button type="text" size="small">{{ current.status || '未知' }}</el-button>
        <el-button type="text" size="small">
          {{ publishStatus[Number(current.publishStatus || 0)] }}
        </el-button>
        <el-button v-if="openType !== 2" type="primary" size="small" class="px-3" @click="goDesign"> 探源 </el-button>
        <el-button v-if="openType !== 2" type="primary" size="small" @click="goEdit">修订</el-button>
      </template>
    </el-page-header>
    <chart-form-detail class="pa-10" :detail="true" :current="current" @back="back" />
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import { requestTargetDetail } from '@/api/chart/chart'
import ChartFormDetail from './components/chart-form-detail'

const PUBLISHSTATUS = ['未发布', '已发布']

export default {
  name: 'ChartView',
  components: { ChartFormDetail },
  data() {
    return {
      title: '',
      current: {},
      publishStatus: PUBLISHSTATUS,
      openType: this.$route.query?.type / 1 || 1,
    }
  },
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    this.init()
  },
  methods: {
    goEdit() {
      this.$router.push(`/redirect/charts/${this.current.id}/edit`)
    },
    goDesign() {
      const row = this.current
      const routeData = this.$router.resolve({
        name: 'ChartDesign',
        query: { id: row.id, panelId: row.panelId },
      })
      this.$router.push('/redirect' + routeData.route.fullPath)
    },
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
    async init() {
      if (this.$route.params.id) {
        const res = await requestTargetDetail({ id: this.$route.params.id })
        if (res.success) {
          this.current = {
            ...res.data,
            director: Number(res.data.director),
            position: Number(res.data.position),
            panelStyle: JSON.stringify(DEFAULT_COMMON_CANVAS_STYLE_STRING),
            reviser: this.name,
            createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          }
        } else {
          this.$message.error(res.message)
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.back {
  line-height: 32px;
}
::v-deep .el-page-header {
  background-color: #ffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
</style>
